<script setup lang="ts">
import {onMounted, ref} from 'vue'
import {useRoute} from 'vue-router'
import {Clock, Heart, Star, Users} from 'lucide-vue-next'
import TopNav from '@/components/TopNav.vue'
import {queryOne} from "@/api/recipe";
import {ElMessage} from "element-plus";

const route = useRoute()
const recipeDetail = ref<RecipeDetail | null>(null)
const comments = ref<RecipeComment[]>([
  {
    id: '1',
    userName: '美食达人',
    userAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=50',
    text: '按照这个方子做的红烧肉真的很好吃，肥而不腻，家人都说好！',
    time: '2小时前'
  },
  {
    id: '2',
    userName: '厨房新手',
    userAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=50',
    text: '第一次做红烧肉，步骤很详细，做出来的效果不错，谢谢分享！',
    time: '1天前'
  },
  {
    id: '3',
    userName: '老厨师',
    userAvatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=50',
    text: '传统做法，味道正宗，建议新手可以试试，成功率很高。',
    time: '3天前'
  }
])

const toggleFavorite = () => {
  if (recipeDetail.value) {
    recipeDetail.value.isFavorite = !recipeDetail.value.isFavorite
  }
}

onMounted(async () => {
  const res: any = await queryOne(Number(route.params.id))
  if (res.code !== 200) {
    ElMessage.error(res.message)
    return
  }
  recipeDetail.value = res.data
})
</script>

<template>
  <div class="recipe-detail-page">
    <TopNav :show-back="true"/>
    <main class="main-content" v-if="recipeDetail">
      <!-- 食谱图片 -->
      <div class="recipe-image">
        <!--todo        <img :src="recipe.image" :alt="recipe.title" />-->
        <img src="/src/assets/images/BlueGirl.jpg" :alt="recipeDetail.title"/>
        <button
            @click="toggleFavorite"
            class="favorite-btn"
            :class="{ active: recipeDetail.isFavorite }"
        >
          <Heart :size="24"/>
        </button>
      </div>

      <!-- 食谱基本信息 -->
      <section class="recipe-info">
        <h1 class="recipe-title">{{ recipeDetail.title }}</h1>
        <p class="recipe-description">{{ recipeDetail.description }}</p>

        <div class="recipe-meta">
          <div class="meta-item">
            <Clock :size="20"/>
            <span>{{ recipeDetail.cookTime }}分钟</span>
          </div>
          <div class="meta-item">
            <Star :size="20"/>
            <span>{{ recipeDetail.rating }}</span>
          </div>
          <div class="meta-item">
            <Users :size="20"/>
            <span>{{ recipeDetail.servings }}人份</span>
          </div>
        </div>
      </section>

      <!-- 材料清单 -->
      <section class="ingredients-section">
        <h2 class="section-title">材料清单</h2>
        <div class="ingredients-list">
          <div
              v-for="ingredient in recipeDetail.ingredients"
              :key="ingredient.id"
              class="ingredient-item"
          >
            <span class="ingredient-name">{{ ingredient.name }}</span>
            <span class="ingredient-amount">{{ ingredient.amount }}</span>
          </div>
        </div>
      </section>

      <!-- 制作步骤 -->
      <section class="steps-section">
        <h2 class="section-title">制作步骤</h2>
        <div class="steps-list">
          <div
              v-for="(step, index) in recipeDetail.steps"
              :key="step.id"
              class="step-item"
          >
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-content">
              <p class="step-text">{{ step.description }}</p>
              <img v-if="step.image" :src="step.image" :alt="`步骤${index + 1}`" class="step-image"/>
            </div>
          </div>
        </div>
      </section>

      <!-- 评论区 -->
      <section class="comments-section">
        <h2 class="section-title">用户评论</h2>
        <div class="comments-list">
          <div
              v-for="comment in comments"
              :key="comment.id"
              class="comment-item"
          >
            <div class="comment-avatar">
              <img :src="comment.userAvatar" :alt="comment.userName"/>
            </div>
            <div class="comment-content">
              <div class="comment-header">
                <span class="comment-user">{{ comment.userName }}</span>
                <span class="comment-time">{{ comment.time }}</span>
              </div>
              <p class="comment-text">{{ comment.text }}</p>
            </div>
          </div>
        </div>
      </section>
    </main>

    <div v-else class="loading-state">
      <div class="loading"></div>
      <p>加载中...</p>
    </div>
  </div>
</template>


<style lang="scss" scoped>
.recipe-detail-page {
  min-height: 100vh;
  background-color: var(--color-background);
}

.main-content {
  max-width: 800px;
  margin: 0 auto;
}

.recipe-image {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.favorite-btn {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  width: 48px;
  height: 48px;
  border: none;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  color: var(--color-text-light);

  &.active {
    color: var(--color-error);
    background-color: rgba(231, 76, 60, 0.1);
  }

  &:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.1);
  }
}

.recipe-info {
  background-color: var(--color-surface);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.recipe-title {
  font-size: var(--font-size-xxl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--spacing-sm);
  line-height: 1.3;
}

.recipe-description {
  color: var(--color-text-light);
  font-size: var(--font-size-md);
  line-height: 1.6;
  margin-bottom: var(--spacing-lg);
}

.recipe-meta {
  display: flex;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);

  svg {
    color: var(--color-primary);
  }
}

.ingredients-section,
.steps-section,
.comments-section {
  background-color: var(--color-surface);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.section-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-sm);
  border-bottom: 2px solid var(--color-primary);
}

.ingredients-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.ingredient-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--color-background);
  border-radius: var(--radius-md);
  border-left: 4px solid var(--color-primary);
}

.ingredient-name {
  font-weight: 500;
  color: var(--color-text);
}

.ingredient-amount {
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.steps-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.step-item {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.step-number {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background-color: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: var(--font-size-lg);
}

.step-content {
  flex: 1;
}

.step-text {
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: var(--spacing-sm);
}

.step-image {
  width: 100%;
  max-width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.comment-item {
  display: flex;
  gap: var(--spacing-md);
  align-items: flex-start;
}

.comment-avatar {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.comment-content {
  flex: 1;
  background-color: var(--color-background);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
}

.comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xs);
}

.comment-user {
  font-weight: 600;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.comment-time {
  color: var(--color-text-light);
  font-size: var(--font-size-xs);
}

.comment-text {
  color: var(--color-text);
  line-height: 1.5;
  font-size: var(--font-size-sm);
}

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-xl);
  color: var(--color-text-light);

  p {
    margin-top: var(--spacing-md);
  }
}

@media (max-width: 768px) {
  .recipe-image {
    height: 250px;
  }

  .recipe-meta {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .ingredients-list {
    grid-template-columns: 1fr;
  }

  .step-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .step-content {
    width: 100%;
  }

  .step-image {
    max-width: 100%;
  }
}
</style>
